<template>
  <!--组织设置页面-->
  <!--一个大的div包含两个小div，其中一个小div分为左右两部分-->
  <div class="main-div">
    <el-row :gutter="20">
      <el-col :span="6">
        <div>
          <el-tabs type="border-card">
            <el-tab-pane label="组织结构">
              <el-tree :data="data"
                       :props="defaultProps"
                       @node-click="nodeClick"
                       default-expand-all
                       highlight-current
                       style="overflow:auto;height: 600px;">
              </el-tree>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
      <el-col :span="18">
        <div>
          <Tabs :currentNode="currentNode"></Tabs>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import Tabs from './Tabs/Index.vue'
  export default {
    components: {
      Tabs
    },
    data() {
      return {
        data: [],
        defaultProps: {
          children: 'child',
          label: 'showName'
        },
        currentNode:{},
      };
    },
    created(){
      this.$http({
        url: this.$BASE_URL+'api/dept/findAllTree',
        headers:{
          token:sessionStorage.getItem("token")
        },
      }).then((res)=>{
        if(res.data.code == 200){
          this.data = res.data.output;
        }
      },(res)=>{
        this.$notify.error({
          title: '错误',
          message: "服务器连接故障！",
          duration: 5000
        });
        console.log(res);
      });
    },
    methods: {
      nodeClick(data){
        this.currentNode = data;
      }
    },
  };
</script>
<style scoped>
  .main-div{
    width: 100%;
    height: 100%;
    margin-top: 10px;
  }
</style>
